<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="/assets/js/jquery.js"></script>
<script src="/assets/validate/jquery.validate.js"></script>
<script src="/assets/validate/message_cn.js"></script>
<script src="/assets/validate/jquery.metadata.js"></script>
<script type="text/javascript">
$(function(){
	$.validator.setDefaults({  
	    submitHandler: function() { alert("submitted!"); }  
	});
	// 添加验证方法 (身份证号码验证)  
    jQuery.validator.addMethod("isIdCardNo", function(value, element) {     
        return this.optional(element) || checkidcard(value);     
    }, "请正确输入您的身份证号码");   
	$("#submitform").validate();
	
	$("#secondform").validate({  
        /*errorLabelContainer: "#messageBox",       //显示错误信息的容器ID  
        wrapper: "li",                              //包含每个错误信息的容器*/  
        rules:{  
            xm:{  
                required: true,  
                minlength: 2,  
                maxlength: 5  
            },  
            pwd:{  
                required: true,  
                minlength: 6  
            },  
            confirm_pwd:{  
                required: true,  
                equalTo: "#pwd"  
            },  
            birthdate:{  
                required: true,  
                dateISO: true  
            },  
            address: {  
                required: true    
            },  
            cards:{  
                /*digits: true,  
                rangelength: [18,20]*/  
                required: true,  
                isIdCardNo: true  
            }  
        },  
        messages:{  
            xm:{  
                required: "请填写姓名",  
                minlength: "字符长度不能小于2个字符",  
                maxlength: "字符长度不能大于5个字符"  
            },  
            pwd:{  
                required: "请填写密码",  
                minlength: "字符长度不能小于6个字符"  
            },  
            confirm_pwd:{  
                required: "请再次输入密码",  
                equalTo: "密码不一致"  
            },  
            birthdate:{  
                required: "请输入出生日期",  
                date: "日期格式不正确(例：2009/04/07)"  
            },  
            address:{  
                required: "请输入地址"     
            },  
            cards:{  
                /*digits: "身份证号码只能为数字",  
                rangelength: "身份号码长度为18～20个字符"*/  
                required: "请输入身份证号",  
                isIdCardNo: "身份证号不正确"  
            }  
        }  
    });  
      
    /*// 输入框获得焦点时，样式设置     
    $('input').focus(function(){     
        if($(this).is(":text") || $(this).is(":password"))     
            $(this).addClass('focus');     
        if ($(this).hasClass('have_tooltip')) {     
            $(this).parent().parent().removeClass('field_normal').addClass('field_focus');     
        }     
    });     
      
    // 输入框失去焦点时，样式设置     
    $('input').blur(function() {     
        $(this).removeClass('focus');     
        if ($(this).hasClass('have_tooltip')) {     
            $(this).parent().parent().removeClass('field_focus').addClass('field_normal');     
        }     
    });*/  
})

function checkidcard(num){  
    var len = num.length, re;  
    if (len == 15)  
        re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);  
    else if (len == 18)  
        re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);  
    else{  
        //alert("请输入15或18位身份证号,您输入的是 "+len+ "位");   
        return false;  
    }  
    var a = num.match(re);  
    if (a != null){  
        if (len==15){  
            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);  
            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];  
        }else{  
            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);  
            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];  
        }  
        if (!B){  
            //alert("输入的身份证号 "+ a[0] +" 里出生日期不对！");   
            return false;  
        }  
    }  
  
    return true;  
}   
</script>
</head>
<body>
	<form action="/test/validate" method="post" name="submitform" id="submitform">
		<p>姓名：<input type="text" name="name" id="name" class="required" minlength="2"></p>
		<p>密码：<input type="password" name="password" id="password" class="required" minlength="2"></p>
		<p>邮箱：<input type="text" name="email" id="email" class="required email"></p>
		<input type="submit" value="提交">
	</form>
	
	<form id="secondform">      
    <fieldset>  
        <legend>自定义jQuery验证</legend>  
        <div id="xm" class="owinput">  
                <label class="req" for="xm"> 姓  名 :</label>  
            <input name="xm" type="text">
        </div>  
          
        <div id="xb" class="owinput">  
                <label class="req" for="pwd"> 密  码 :</label>  
            <input id="pwd" name="pwd" type="password">
        </div>  
          
        <div id="xb" class="owinput">  
                <label class="req" for="confirm_pwd"> 密码确认 :</label>  
            <input name="confirm_pwd" type="password">
        </div>  
          
        <div id="csrq" class="owinput">  
                <label class="req" for="birthdate"> 出生日期 :</label>  
            <input name="birthdate" type="text">
        </div>  
          
        <div id="xjzd" class="owinput">  
                <label class="req" for="address"> 现居住地 :</label>  
            <input value="" name="address" type="text">
        </div>  
          
        <div id="sfzh" class="owinput">  
                <label for="cards"> 身份证号 :</label>  
             <input name="cards" type="text">
        </div>     
    </fieldset>  
    <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->  
    <div id="regSubmit">  
        <button id="send" type="submit">提  交</button>
    </div>  
</form> 
</body>
</html>